* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 微软雅黑;
}

a {
    text-decoration: none;
    display: block;
    color: #000;
}

ul {
    list-style: none;
}

div {
    // border: solid 1px;
}

//自适应设置
@function vw($px:1) {
    @return $px / 375 * 100vw;
}

@function vh($px:1) {
    @return $px / 667 * 100vh;
}

//容器样式
.container {
    display: flex;
    flex-direction: column;
    background-color: #f5f5f5;

    .grid {
        flex: auto 1 auto;
        display: flex;
        background-color: #fff;
    }

    //head部分样式
    .head {
        flex-basis: vh(30);
        padding: vh(0) vw(10) vh(7);

        .esc,
        .share {
            flex-basis: vw(30);
            transform: rotate(180deg);
        }

        .head-text {
            flex: 1 1 auto;
            line-height: vh(30);
            text-align: center;
            font-size: vw(17);
        }
    }

    //轮播图样式
    .carousel {
        flex-basis: vh(150);
        overflow: hidden;
        position: relative;

        .parts {
            height: vh(150);
            // transition: all 2s linear;
            width: vw(375);

            //轮播过渡动画作用标签
            .picture {
                width: 500%;
                transition: all 1.5s linear;

                div {
                    float: left;
                    width: 20%;

                    img {
                        width: 100%;
                        height: vh(150);
                    }
                }


            }

            //单选按钮
            .danxuan {
                display: none;
            }

            //控制器
            .control {
                position: absolute;
                display: flex;
                bottom: vh(6);
                left: 50%;
                transform: translateX(-50%);

                label {
                    width: vw(10);
                    height: vh(3);
                    background-color: #fff;
                    border: vw(1) solid;
                    margin-right: vw(5);
                    display: block;
                }

                label:hover {
                    background-color: red;
                }
            }

            //过渡动画
            $i:1;

            @while $i < 6 {
                #r#{$i}:checked {
                    ~ .picture {
                        margin-left: 100% - $i * 100%;
                        $i: $i+1;
                    }
                }
            }
        }
    }
    // 美食店铺名称
    .title {
        padding: vw(16) 0 vw(17) vw(15);
        background-color: #fff;
        border-bottom: 1px solid #eee;
        .name{
            strong{
                font-size: vw(22);
                color: #333;
                line-height: vw(30);
            }
            span{
                padding-left: vw(8);
                font-size: vw(12);
                color: #bbb;
                line-height: vw(18);
            }
        }
        .addr {
            font-size: vw(13);
            color: #FF416A;
            letter-spacing: 0;
        }
    }
    //位置及联系
    .store{
        background-color: #fff;
        padding: vw(14) 0 vw(13)
        vw(15);
        border-bottom: 1px solid #eee;
        display: flex;
        .site{
            img{
                width: vw(16);
                height: vw(16);
            }
        }
        .describe{
            padding-left: vw(10);
            padding-right: vw(33);
            font-size: vw(14);
            color: #333;
            font-weight: 500;
            line-height: vw(20);
        }
        .tel{
            border-left: 1px solid #ccc;
            width: vw(63);
            display: flex;
            justify-content: center;
            align-items: center;
            img{
                width: vw(20);
            }
        }
    }
    //立即购买
    .buy{
        background-color: #fff;
        padding: vw(17) vw(15) vw(19);
        .once{
            border-radius: vw(4);
            border: 1px solid #e52f17;
            padding: vw(12) vw(140);
            span{
                font-size: vw(15);
                color: #e52f17;
                font-weight: 700;
            }
        }
    }
    //商家特色菜
    .p{
        background-color: #fff;
        margin-top: vw(10);
        padding: vw(15) vw(15) vw(17);
        .title{
            font-size: vw(17);
            font-weight: 700;
        }
        @keyframes move {
            from{
                margin-left: 0;
            }
            to{
                margin-left: vw(-336);
            }
        }
        .out{
            overflow: hidden;

            .food{
                // border: solid;
                margin-top: vw(9);
                display: flex;
                animation: move 5s infinite linear;
                .cai{
                    margin-right: vw(4);
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    img{
                        width: vw(80);
                        height: vw(54);
                    }
                    span{
                        margin-top: vw(4);
                        font-size: vw(12);
                        line-height: vw(17);
                    }
                }
            }
        }
    }
    //周边推荐
    //附带跳转效果
    .recommend{
        margin-top: vw(15);
        .title{
            // display: flex;
            position: relative;
            span{
                position: absolute;
                font-size: vw(17);
                left: vw(15);
                top: vw(15);
                color: #333;
                line-height: vw(24);
                line-height: vw(24);
                font-weight: 700;
            }
            .area{
                // position: relative;    
                input{
                    visibility: hidden;
                    top: 0;
                    z-index: -1;
                    $s:1;
                    @while $s < 4 {
                        &#s#{$s}:checked {
                            &~.area-all .area-in{
                                margin-left: vw(361) - $s * vw(361);
                            }
                            &~.s#{$s}{
                                background-color: #e52f17;
                                color: #fff;
                            }
                        }
                        $s: $s+1;
                    }
                }
                label{
                    font-size: vw(13);
                    color: #333;
                    line-height: vw(18);
                    border-radius: vw(14);
                    width: vw(52);
                    height: vw(24);
                    background-color: #eee;
                    line-height: vw(18);
                    margin-right: vw(15);
                    padding: vw(3) vw(13);
                    display: inline-block;
                    margin-bottom: vw(13);
                    // &:hover{
                    //     background-color: #e52f17;
                    //     color: #fff;
                    // }
                }
                .s1{
                    margin-left: vw(80);
                }
                .area-all{
                    display: flex;
                    width: vw(345);
                    overflow: hidden;
                    .area-in{
                        transition: all .4s linear;
                        width: vw(1083);
                        display: flex;
                        .p-all{
                            display: flex;
                            justify-content: space-between;
                            margin-right: vw(15);
                            width: vw(346);
                            .picture{
                                display: flex;
                                flex-direction: column;
                                border-radius: vw(2);
                                box-shadow: vw(1) vw(4) vw(10) 0 rgba($color: #000000, $alpha: .08);
                                img{
                                    width: vw(108);
                                    height: vw(66);
                                }
                                .word{
                                    font-size: vw(12);
                                    line-height: vw(17);
                                    padding: vw(6) vw(24) vw(9);
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    //图文详情
    .details{
        background-color: #fff;
        margin-top: vw(15);
        display: flex;
        flex-direction: column;
        align-items: center;
        span{
            margin: vw(12) auto;
            font-size: vw(17);
            color: #333;
            font-weight: 700;

        }
        img{
            width: vw(375);
            height: vw(344);
        }
    }
}